import { MobileDesignPage } from "admin/modules/station/page";
import { templateControlIds, guid } from "share/common";
import { State as HtmlControlState } from 'components/html/control';
import ReactDOM = require("react-dom");
import React = require("react");
import * as chitu from "maishu-chitu";

export default function (page: chitu.Page) {

    let carousel_data: HtmlControlState = {
        html: `<div class="text-center" style="padding: 50px 0 50px 0;">商品图片</div>`
    }
    let carousel_html: ControlData = {
        get controlId() {
            return templateControlIds.carousel;
        }, controlName: 'html', position: 'view',
        data: carousel_data, selected: 'disabled'
    }
    let productInfo_data: HtmlControlState = {
        html: `<div class="text-center" style="padding: 50px 0 50px 0;">商品信息</div>`
    }
    let productInfo_html: ControlData = {
        get controlId() {
            return templateControlIds.productInfo
        }, controlName: 'html', position: 'view',
        data: productInfo_data, selected: 'disabled',
    }
    let productInfoBottomBar: ControlData = {
        get controlId() {
            return templateControlIds.productInfoBottomBar;
        },
        controlName: 'productInfoBottomBar', position: 'footer',
        data: {}, selected: 'disabled'
    }
    let other_data: HtmlControlState = {
        html: `<div class="text-center" style="padding: 50px 0 50px 0;">商品介绍</div>`
    }
    let other_html: ControlData = {
        get controlId() {
            return templateControlIds.other;
        },
        controlName: 'html', position: 'view',
        data: other_data, selected: 'disabled'
    }
    let pageData: PageData = {
        type: 'productTemplate',
        controls: [
            carousel_html,
            productInfo_html,
            // productInfoBottomBar,
            other_html
        ]
    };
    ReactDOM.render(<MobileDesignPage elementPage={page} pageData={pageData} />, page.element);
}